<template>
  <Layout>
    <h1>开源项目</h1>
    <div>
      <el-card shadow="hover" v-for="(item,index) in projects" :key="'pro'+index" style="margin-bottom: 20px">
        <div slot="header">
          <el-row>
            <el-col :span="16">
              <span>
                  <a style="text-decoration:none;cursor:pointer" @click="goDetails(item.name)">
                      <i class="el-icon-service"></i>&nbsp;&nbsp; {{item.name}}
                  </a>
              </span>
            </el-col>
            <el-col :span="8">
              <div style="text-align: right;">
                <el-button @click="" style="padding: 3px 0" type="text" icon="el-icon-back">前往GitHub</el-button>
                <el-button @click="" style="padding: 3px 0" type="text" icon="el-icon-share"></el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">
          最近更新 {{item.updateTime | utcToLocal}}
        </div>
        <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;padding: 10px 0px 0px 0px">
          {{item.description}}
        </div>
        <div style="font-size: 1.1rem;color: #303133;padding: 10px 0px 0px 0px">
          <el-row>
            <el-col :span="16" style="padding-top: 5px">
              <el-tooltip effect="dark" :content="'star '+item.stargazersCount" placement="bottom">
                <i class="el-icon-star-off" style="margin: 0px 5px 0px 0px"></i>
              </el-tooltip>
              {{item.stargazersCount}}
              <el-tooltip effect="dark" :content="'watch '+item.watchersCount" placement="bottom">
                <i class="el-icon-view" style="margin: 0px 5px 0px 15px"></i>
              </el-tooltip>
              {{item.watchersCount}}
              <el-tooltip effect="dark" :content="'fork '+item.forksCount" placement="bottom">
                <i class="el-icon-bell" style="margin: 0px 5px 0px 15px"></i>
              </el-tooltip>
              {{item.forksCount}}
            </el-col>
            <el-col :span="8" style="text-align: right;">
              <el-tag size="small" type="danger" v-if="item.license">{{item.license}}</el-tag>
              <el-tag size="small" type="success">{{item.language}}</el-tag>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <div style="text-align: center">
        <Pager :info="$page.allProject.pageInfo" />
      </div>
    </div>
  </Layout>
</template>

<page-query>
query($page:Int) {
  allProject(perPage:5,page:$page) @paginate {
    pageInfo{
        totalPages
        currentPage
      }
      edges{
        node{
          id
          name
          url
          description
          stargazersCount
          watchersCount
          forksCount
          language
          license
          createTime
          updateTime
      }
    }
  }
}
</page-query>

<script>
import { Pager } from 'gridsome'

export default {
  name: "project",
  metaInfo: {
    title: '开源项目'
  },
  components:{
    Pager
  },
  computed: {
    projects() {
      return this.$page.allProject.edges.map(v => v.node)
    }
  },
  methods:{
    goDetails(id){
      console.log(id)
    }
  }
}
</script>

<style scoped>

</style>
